<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="outer" id="outer">
        div1...
        <p>第一个p</p>
        <p>第二个p</p>
        <div>
            <p>孙子p</p>
        </div>
    </div>

    <div class="outer">
        div2...
    </div>

    <input type="text" name="gender" value="男">
    <input type="text" name="gender" value="女">

    <script>
        //1. 根据id获取
        //2. 根据class获取 - 返回的是一个数组
        //3. 根据标签名获取 - 返回的是一个数组
        let divs = document.getElementsByTagName("div");
        console.log(divs.length);
        console.log(divs[1].innerHTML.trim());

        //4. 根据name属性的值 - 返回的是一个数组
        let input = document.getElementsByName("gender");
        console.log(input[1].value);

        let x = document.querySelector("#outer");
        console.log(x.innerHTML);

        let p = document.querySelectorAll("#outer>div>p")
        console.log(p.length);

        //querySelector => 获取第一次出现的dom
        //querySelectorAll => 获取所有的
        let div = document.querySelectorAll(".outer>div>p");
        console.log(div[0].innerHTML);
    </script>
</body>
</html>